import React, { Component } from "react";
import { Flex, Button, WingBlank } from "antd-mobile";
import "./index.scss";
class MyScreeningPickView extends Component {
  state = {
    dataList: [],
    select: {},
  };
  // 解析 父组件传来的数据
  prasePropsData = () => {
    const { propsData } = this.props;
    const list = [];
    for (let i in propsData) {
      let temp = {};
      if (i === "characteristic") {
        temp.name = "其他";
        temp.label = i;
        temp.data = propsData[i];
        list.push(temp);
      } else if (i === "roomType") {
        temp.name = "房屋类型";
        temp.label = i;
        temp.data = propsData[i];
        list.push(temp);
      } else if (i === "floor") {
        temp.name = "楼层";
        temp.label = i;
        temp.data = propsData[i];
        list.push(temp);
      } else if (i === "oriented") {
        temp.name = "方向";
        temp.label = i;
        temp.data = propsData[i];
        list.push(temp);
      }
    }
    this.setState({
      dataList: list,
    });
  };

  // 记录数据
  recordData = (label, item) => {
    const { select } = this.state;

    if (select[label] === item.value) {
      select[label] = "null";
    } else {
      select[label] = item.value;
    }
    this.setState({
      select,
    });
  };
  componentDidMount() {
    this.prasePropsData();
    const { defaultValue } = this.props;

    defaultValue !== "" &&
      defaultValue !== undefined &&
      this.setState({
        select: defaultValue,
      });
  }

  render() {
    const { dataList, select } = this.state;
    const { collectDataMethod } = this.props;
    return (
      <div className="myScreeningPickViewWrapper">
        <div className="msg">
          {dataList.map((item, index) => {
            return (
              <div className="item" key={index}>
                <h2>{item.name}</h2>
                <div className="selects">
                  {item.data.map((one) => {
                    return (
                      <div
                        id={one.value}
                        className={[
                          "select",
                          select[item.label] === one.value && "selected",
                        ].join(" ")}
                        onClick={() => {
                          this.recordData(item.label, one);
                        }}
                      >
                        {one.label}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
        <div className="button">
          <Flex>
            <Flex.Item>
              <WingBlank>
                <Button
                  type="primary"
                  onClick={() => {
                    collectDataMethod("", 3, false, "");
                  }}
                >
                  取消
                </Button>
              </WingBlank>
            </Flex.Item>
            <Flex.Item>
              <WingBlank>
                <Button
                  type="warning"
                  onClick={() => {
                    collectDataMethod(select, 3, true, select);
                  }}
                >
                  确定
                </Button>
              </WingBlank>
            </Flex.Item>
          </Flex>
        </div>
      </div>
    );
  }
}

export default MyScreeningPickView;
